<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		body {
			margin: 0;
			padding: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100vh;
			background-color: #222;
		}

		.loader-container {
			width: 100px;
			height: 100px;
			perspective: 780px;
			position: relative;
		}

		.loader-child {
			position: absolute;
			width: 100%;
			height: 100%;
			box-sizing: border-box;
			border-radius: 50%;
		}

		.loader-child:nth-of-type(1) {
			left: 0%;
			top: 0%;
			animation: rotate-one 1.15s linear infinite;
			border-bottom: 3px solid #ff5500;
		}

		.loader-child:nth-of-type(2) {
			right: 0%;
			top: 0%;
			animation: rotate-two 1.15s linear infinite;
			border-right: 3px solid #55aa00;
		}

		.loader-child:nth-of-type(3) {
			right: 0%;
			bottom: 0%;
			animation: rotate-three 1.15s linear infinite;
			border-top: 3px solid #ffff00;
		}

		@keyframes rotate-one {
			0% {
				transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
			}

			100% {
				transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
			}
		}

		@keyframes rotate-two {
			0% {
				transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
			}

			100% {
				transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
			}
		}

		@keyframes rotate-three {
			0% {
				transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
			}

			100% {
				transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
			}
		}


		.load-container1 {
			position: relative;
			width: 100px;
			height: 100px;
			margin: 0 auto;
		}

		.load-container1 .boxLoading {
			width: 50px;
			height: 50px;
			margin: auto;
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
		}

		.load-container1 .boxLoading:before {
			content: "";
			width: 50px;
			height: 5px;
			background: #000;
			opacity: 0.1;
			position: absolute;
			top: 59px;
			left: 0;
			border-radius: 50%;
			animation: shadow 0.5s linear infinite;
		}

		.load-container1 .boxLoading:after {
			content: "";
			width: 50px;
			height: 50px;
			background: #ffaaff;
			animation: animate 0.5s linear infinite;
			position: absolute;
			top: 0;
			left: 0;
			border-radius: 3px;
		}

		@keyframes animate {
			17% {
				border-bottom-right-radius: 3px;
			}

			25% {
				transform: translateY(9px) rotate(22.5deg);
			}

			50% {
				transform: translateY(18px) scale(1, 0.9) rotate(45deg);
				border-bottom-right-radius: 40px;
			}

			75% {
				transform: translateY(9px) rotate(67.5deg);
			}

			100% {
				transform: translateY(0) rotate(90deg);
			}
		}

		@keyframes shadow {

			0%,
			100% {
				transform: scale(1, 1);
			}

			50% {
				transform: scale(1.2, 1);
			}
		}




		#load {
			width: 75px;
			animation: loading 3s linear infinite;
		}

		#load #loading-inner {
			stroke-dashoffset: 0;
			stroke-dasharray: 300;
			stroke-width: 10;
			stroke-miterlimit: 10;
			stroke-linecap: round;
			animation: loading-circle 2s linear infinite;
			stroke: #aa55ff;
			fill: transparent;
		}

		@keyframes loading {
			0% {
				transform: rotate(0);
			}

			100% {
				transform: rotate(360deg);
			}
		}

		@keyframes loading-circle {
			0% {
				stroke-dashoffset: 0;
			}

			100% {
				stroke-dashoffset: -600;
			}
		}

		.load {
			width: 50px;
			height: 50px;
			margin: 0 auto;
			position: relative;
			border-radius: 50%;
			overflow: hidden;
			background-color: rgba(0, 169, 178, 0.2);
		}

		.load::before {
			content: "";
			width: 70px;
			height: 70px;
			background-color: #00adb5;
			position: absolute;
			left: 50%;
			bottom: 50%;
			z-index: 1;
			transform-origin: left bottom;
			animation: rotate00 1.5s infinite linear;
		}

		.load::after {
			content: "";
			width: 40px;
			height: 40px;
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			margin: auto;
			background-color: #222;
			z-index: 2;
			border-radius: 50%;
		}

		@keyframes rotate00 {
			0% {
				transform: rotate(0);
			}

			50% {
				transform: rotate(180deg);
			}

			100% {
				transform: rotate(360deg);
			}
		}

		.load-container2 {
			height: 150px;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.load-container2 .container {
			width: 50px;
			height: 60px;
			text-align: center;
			font-size: 10px;
		}

		.load-container2 .container .boxLoading {
			background-color: #550000;
			height: 100%;
			width: 6px;
			display: inline-block;
			-webkit-animation: stretchdelay 1.2s infinite ease-in-out;
			animation: stretchdelay 1.2s infinite ease-in-out;
		}

		.load-container2 .container .boxLoading2 {
			-webkit-animation-delay: -1.1s;
			animation-delay: -1.1s;
		}

		.load-container2 .container .boxLoading3 {
			-webkit-animation-delay: -1s;
			animation-delay: -1s;
		}

		.load-container2 .container .boxLoading4 {
			-webkit-animation-delay: -0.9s;
			animation-delay: -0.9s;
		}

		.load-container2 .container .boxLoading5 {
			-webkit-animation-delay: -0.8s;
			animation-delay: -0.8s;
		}

		@-webkit-keyframes stretchdelay {

			0%,
			40%,
			100% {
				-webkit-transform: scaleY(0.4);
			}

			20% {
				-webkit-transform: scaleY(1);
			}
		}

		@keyframes stretchdelay {

			0%,
			40%,
			100% {
				transform: scaleY(0.4);
				-webkit-transform: scaleY(0.4);
			}

			20% {
				transform: scaleY(1);
				-webkit-transform: scaleY(1);
			}
		}



		.load-container2 {
			height: 150px;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.load-container2 .container {
			width: 50px;
			height: 60px;
			text-align: center;
			font-size: 10px;
		}

		.load-container2 .container .boxLoading {
			background-color: #00adb5;
			height: 100%;
			width: 6px;
			display: inline-block;
			-webkit-animation: stretchdelay 1.2s infinite ease-in-out;
			animation: stretchdelay 1.2s infinite ease-in-out;
		}

		.load-container2 .container .boxLoading2 {
			-webkit-animation-delay: -1.1s;
			animation-delay: -1.1s;
		}

		.load-container2 .container .boxLoading3 {
			-webkit-animation-delay: -1s;
			animation-delay: -1s;
		}

		.load-container2 .container .boxLoading4 {
			-webkit-animation-delay: -0.9s;
			animation-delay: -0.9s;
		}

		.load-container2 .container .boxLoading5 {
			-webkit-animation-delay: -0.8s;
			animation-delay: -0.8s;
		}

		@-webkit-keyframes stretchdelay {

			0%,
			40%,
			100% {
				-webkit-transform: scaleY(0.4);
			}

			20% {
				-webkit-transform: scaleY(1);
			}
		}

		@keyframes stretchdelay {

			0%,
			40%,
			100% {
				transform: scaleY(0.4);
				-webkit-transform: scaleY(0.4);
			}

			20% {
				transform: scaleY(1);
				-webkit-transform: scaleY(1);
			}
		}

		.load-container3 {
			width: 60px;
			height: 60px;
			background-color: #ffcee6;
			margin: 50px auto;
			-webkit-animation: rotateplane 1.2s infinite ease-in-out;
			animation: rotateplane 1.2s infinite ease-in-out;
		}

		@-webkit-keyframes rotateplane {
			0% {
				-webkit-transform: perspective(120px);
			}

			50% {
				-webkit-transform: perspective(120px) rotateY(180deg);
			}

			100% {
				-webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg);
			}
		}

		@keyframes rotateplane {
			0% {
				transform: perspective(120px) rotateX(0deg) rotateY(0deg);
				-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
			}

			50% {
				transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
				-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
			}

			100% {
				transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
				-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
			}
		}

		.load-container4 {
			margin: 50px auto;
			width: 150px;
			text-align: center;
		}

		.load-container4 .load0 {
			width: 20px;
			height: 20px;
			background-color: #00adb5;
			border-radius: 100%;
			display: inline-block;
			-webkit-animation: bouncedelay 1.4s infinite ease-in-out;
			animation: bouncedelay 1.4s infinite ease-in-out;
			/* Prevent first frame from flickering when animation starts */
			-webkit-animation-fill-mode: both;
			animation-fill-mode: both;
		}

		.load-container4 .load1 {
			-webkit-animation-delay: -0.32s;
			animation-delay: -0.32s;
		}

		.load-container4 .load2 {
			-webkit-animation-delay: -0.16s;
			animation-delay: -0.16s;
		}

		@-webkit-keyframes bouncedelay {

			0%,
			80%,
			100% {
				-webkit-transform: scale(0);
			}

			40% {
				-webkit-transform: scale(1);
			}
		}

		@keyframes bouncedelay {

			0%,
			80%,
			100% {
				transform: scale(0);
				-webkit-transform: scale(0);
			}

			40% {
				transform: scale(1);
				-webkit-transform: scale(1);
			}
		}

		.load-container5 {
			margin: 50px auto;
			width: 48px;
			height: 48px;
			position: relative;
		}

		.load-container5 .container {
			position: absolute;
			width: 100%;
			height: 100%;
		}

		.load-container5 .container .circle {
			width: 12px;
			height: 12px;
			background-color: #00adb5;
			border-radius: 100%;
			position: absolute;
			-webkit-animation: bouncedelay 1.2s infinite ease-in-out;
			animation: bouncedelay 1.2s infinite ease-in-out;
			-webkit-animation-fill-mode: both;
			animation-fill-mode: both;
		}

		.load-container5 .container .circle1 {
			top: 0;
			left: 0;
		}

		.load-container5 .container .circle2 {
			top: 0;
			right: 0;
		}

		.load-container5 .container .circle3 {
			right: 0;
			bottom: 0;
		}

		.load-container5 .container .circle4 {
			left: 0;
			bottom: 0;
		}

		.load-container5 .container1 .circle2 {
			-webkit-animation-delay: -0.9s;
			animation-delay: -0.9s;
		}

		.load-container5 .container1 .circle3 {
			-webkit-animation-delay: -0.6s;
			animation-delay: -0.6s;
		}

		.load-container5 .container1 .circle4 {
			-webkit-animation-delay: -0.3s;
			animation-delay: -0.3s;
		}

		.load-container5 .container2 {
			-webkit-transform: rotateZ(45deg);
			transform: rotateZ(45deg);
		}

		.load-container5 .container2 .circle1 {
			-webkit-animation-delay: -1.1s;
			animation-delay: -1.1s;
		}

		.load-container5 .container2 .circle2 {
			-webkit-animation-delay: -0.8s;
			animation-delay: -0.8s;
		}

		.load-container5 .container2 .circle3 {
			-webkit-animation-delay: -0.5s;
			animation-delay: -0.5s;
		}

		.load-container5 .container2 .circle4 {
			-webkit-animation-delay: -0.2s;
			animation-delay: -0.2s;
		}

		.load-container5 .container3 {
			-webkit-transform: rotateZ(90deg);
			transform: rotateZ(90deg);
		}

		.load-container5 .container3 .circle1 {
			-webkit-animation-delay: -1s;
			animation-delay: -1s;
		}

		.load-container5 .container3 .circle2 {
			-webkit-animation-delay: -0.7s;
			animation-delay: -0.7s;
		}

		.load-container5 .container3 .circle3 {
			-webkit-animation-delay: -0.4s;
			animation-delay: -0.4s;
		}

		.load-container5 .container3 .circle4 {
			-webkit-animation-delay: -0.1s;
			animation-delay: -0.1s;
		}

		@-webkit-keyframes bouncedelay {

			0%,
			80%,
			100% {
				-webkit-transform: scale(0);
			}

			40% {
				-webkit-transform: scale(1);
			}
		}

		@keyframes bouncedelay {

			0%,
			80%,
			100% {
				transform: scale(0);
				-webkit-transform: scale(0);
			}

			40% {
				transform: scale(1);
				-webkit-transform: scale(1);
			}
		}
	</style>
	<body>
		<section>
			<section style="display: flex;align-items: center;">
				<div class="loader-container">
					<div class="loader-child"></div>
					<div class="loader-child"></div>
					<div class="loader-child"></div>
				</div>
				<div class="load-container1">
					<div class="boxLoading"></div>
				</div>

				<svg id="load" x="0px" y="0px" viewBox="0 0 150 150">
					<circle id="loading-inner" cx="75" cy="75" r="60" />
				</svg>

				<div class="load"></div>
			</section>
			<section style="display: flex;align-items: center;">
				<div class="load-container2">
					<div class="container">
						<div class="boxLoading boxLoading1"></div>
						<div class="boxLoading boxLoading2"></div>
						<div class="boxLoading boxLoading3"></div>
						<div class="boxLoading boxLoading4"></div>
						<div class="boxLoading boxLoading5"></div>
					</div>
				</div>

				<div class="load-container3"></div>

				<div class="load-container4">
					<div class="load0 load1"></div>
					<div class="load0 load2"></div>
					<div class="load0"></div>
				</div>

				<div class="load-container5">
					<div class="container container1">
						<div class="circle circle1"></div>
						<div class="circle circle2"></div>
						<div class="circle circle3"></div>
						<div class="circle circle4"></div>
					</div>
					<div class="container container2">
						<div class="circle circle1"></div>
						<div class="circle circle2"></div>
						<div class="circle circle3"></div>
						<div class="circle circle4"></div>
					</div>
					<div class="container container3">
						<div class="circle circle1"></div>
						<div class="circle circle2"></div>
						<div class="circle circle3"></div>
						<div class="circle circle4"></div>
					</div>
				</div>
			</section>
		</section>
	</body>
</html>
